<template>
  <div class="stencil-panel">
    托转菜单
    <div className="dnd-wrap">
      <div
        v-for="(item, index) in nodesTempList"
        :key="item.code"
        :data-type="item.code"
        class="dnd-rect"
        :class="{
          'dnd-circle': item.name === 'circle',
        }"
        draggable="true"
        @dragend="handleDragEnd($event, item)"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>
<script setup lang='ts' name="NodeTemp">
import { Graph, Dom, Addon } from '@antv/x6'
import { onMounted } from 'vue'
import type { NodeTempType } from './node-temp'

const nodesTempList:NodeTempType[] = [
  {
    code: 'rect',
    name: 'rect',
    width: 100,
    height: 40,
    label: '普通节点',
  },
  {
    code: 'approve',
    name: 'circle',
    width: 60,
    height: 60,
    label: '审批节点',
  },
  {
    code: 'control',
    name: 'circle',
    width: 60,
    height: 60,
    label: '控制节点',
  },
]

const emit = defineEmits(['dragEnd'])
function handleDragEnd(e: MouseEvent, item: NodeTempType) {
  console.log('拖拽结束', e)
  emit('dragEnd', e, item)
}
</script>
<style lang='scss'>
.stencil-panel {
  width: 300px;
  height: 100%;
  position: relative;
  border-right: 1px solid #dfe3e8;
}

.dnd-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  border: 1px solid #f0f0f0;
  user-select: none;
  font-size: 12px;
  .dnd-rect {
    width: 100px;
    height: 40px;
    margin: 16px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #8f8f8f;
    border-radius: 6px;
    cursor: move;
  }
  .dnd-circle {
    width: 60px;
    height: 60px;
    margin: 16px;
    line-height: 60px;
    text-align: center;
    border: 1px solid #8f8f8f;
    border-radius: 100%;
    cursor: move;
  }
}
</style>